@import '../../assets/css/mixin.less';

.content {
  display: flex;
  gap: 16px;
  .left {
    display: flex;
    flex-shrink: 0;
    background-color: #fff;
    height: calc(100vh - 80px);
    width: 420px;
    // gap: 10px;
    .level {
      overflow: hidden;
      flex: 1 0 50%;
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      .scrollbar();
      .menu-content {
        overflow: auto;
        overflow-x: hidden;
      }
      .info {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333333;
        margin: 0 10px;
        padding: 0 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 16px;
    height: calc(100vh - 80px);
    .scrollbar();
    .right-content {
      overflow: auto;
      display: flex;
      flex-direction: column;
      padding: 0 0 40px 0;
    }
    .right-info {
      display: flex;
      padding: 8px 16px;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #ccc;
      :global {
        .ant-form-item {
          margin-bottom: 0;
        }
        .ant-form {
          flex: 1;
        }
      }
      .leftdata {
        display: flex;
        flex: 1;
        gap: 16px;
        align-items: center;
        .txt {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          // margin-right: 16px;
          flex: 1 0 30%;
        }
        .text {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #8d8d8d;
          flex: 1 0 70%;
        }
      }

      .add {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #5584ff;
        cursor: pointer;
        svg {
          margin-right: 8px;
        }
      }

      &:last-child {
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
.btns {
  display: flex;
  gap: 20px;
  svg {
    margin-right: 4px;
  }
  .cancel {
    color: #b0b0b0;
  }
}

.title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #333333;
  margin: 16px;
}

.active {
  background-color: #f4f7ff;
}

.total {
  position: absolute;
  right: 40px;
  bottom: 28px;
  width: 214px;
  height: 40px;
  line-height: 40px;
  background: #f2f6ff;
  border-radius: 8px 0px 0px 8px;
  padding: 0 12px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #5584ff;
  .totalimg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #6690ff;
    border-radius: 8px;
    svg {
      color: #fff;
    }
  }
}

.ellipsis {
  flex: 1;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  padding-left: 16px;
}

// 媒体查询
/* 应用到设备宽度小于等于 1200px 的情况 */
@media (max-width: 1200px) {
  .leftdata {
    .txt {
      flex: 1 0 46% !important;
    }
    .text {
      flex: 1 0 54% !important;
    }
  }
}

/* 应用到设备宽度小于等于 1200px 的情况 */
@media (min-width: 1450px) {
  .leftdata {
    .txt {
      flex: 1 0 20% !important;
    }
    .text {
      flex: 1 0 80% !important;
    }
  }
}
